<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('合并行或列')}`">{{ $t('合并行或列') }}</t>
            <li>
                <span class="d-code">span-method</span>方法可以实现合并行或列，方法的参数是一个对象，里面包含
                <span class="s-code">当前行 row</span>,
                <span class="s-code">当前列 column</span>,
                <span class="s-code">当前行号 rowIndex</span>,
                <span class="s-code">当前列号 columnIndex</span>；
                该函数可以返回一个包含两个元素的数组，
                第一个元素代表<span class="s-code">rowspan</span> ;
                第二个元素代表<span class="s-code">colspan</span>;
                也可以返回一个键名为<span class="s-code">rowspan</span>和<span class="s-code">colspan</span>的对象。
            </li>
        </template>
        <p class="span-title">合并前：</p>
        <sib-table border :height="242" :table-column="tableColumn" :table-data="tableData"></sib-table>
        <p class="span-title">合并后：</p>
        <sib-table border :height="242" :table-column="tableColumn" :table-data="tableData" :span-method="spanMethod"></sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(4).fill().map((_, i) => ({
            id: i + 1,
            area: ({ 0: '艾欧尼亚', 1: '比尔吉沃特', 2: '祖安' })[i % 3],
            name: `疾风剑豪 ${i + 1} 号`,
            sex: '男',
            hobby1: '哈萨ki',
            hobby2: i < 2 ? '哈萨ki' : '痛里呀嘎痛',
        })));
        // 组件内部会遍历所有单元格，并调用该方法；
        // return [m, n] 的含义，即在当前单元格的基础上，向下扩展至 m 行，且向右扩展至 n 列，如果为 0，表示单元格收缩隐藏
        // 注意： 当某个单元格做了扩展操作，那么被合并的单元格相应的需要做收缩操作（return [0, 0]），否则会多出单元格导致显示异常
        const spanMethod = ({ column, rowIndex }) => {
            // 当处于【性别】列时
            if (column.property === 'sex') {
                // 如果当前是【性别】列的第一个单元格，那么将向下扩展至 tableData.value.length 行，并且向右扩展至 1 列
                if (rowIndex === 0) return [tableData.value.length, 1];
                // 否则如果当前是【性别】列的其他单元格，那么单元格将收缩至 0 行 0 列（收缩隐藏）
                return [0, 0];
            }
            // 当处于【爱好1】列时
            if (column.property === 'hobby1') {
                // 如果当前是第一个单元格，那么将向下扩展至 2 行，并且向右扩展至 2 列
                if (rowIndex === 0) return [2, 2];
                // 否则如果当前是第二个单元格，那么单元格将收缩至 0 行 0 列（收缩隐藏）
                if (rowIndex === 1) return [0, 0];
            }
            // 当处于【爱好2】列时，收缩前两行的单元格
            if (column.property === 'hobby2') {
                if (rowIndex < 2) return [0, 0];
            }
            return [1, 1];
        };

        return {
            tableColumn: [
                { label: '地区', code: 'area' },
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '爱好1', code: 'hobby1' },
                { label: '爱好2', code: 'hobby2' },
            ],
            tableData,
            spanMethod,
            templateString: `<template>
    <div class="example-box">
        <p>合并前：</p>
        <sib-table border :table-column="tableColumn" :table-data="tableData"></sib-table>

        <p>合并后：</p>
        <sib-table border :table-column="tableColumn" :table-data="tableData" :span-method="spanMethod"></sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(4).fill().map((_, i) => ({
            id: i + 1,
            area: ({ 0: '艾欧尼亚', 1: '比尔吉沃特', 2: '祖安' })[i % 3],
            name: \`疾风剑豪 \${i + 1} 号\`,
            sex: '男',
            hobby1: '哈萨ki',
            hobby2: i < 2 ? '哈萨ki' : '痛里呀嘎痛',
        })));
        // 组件内部会遍历所有单元格，并调用该方法；
        // return [m, n] 的含义，即在当前单元格的基础上，向下扩展至 m 行，且向右扩展至 n 列，如果为 0，表示单元格收缩隐藏
        // 注意： 当某个单元格做了扩展操作，那么被合并的单元格相应的需要做收缩操作（return [0, 0]），否则会多出单元格导致显示异常
        const spanMethod = ({ column, rowIndex }) => {
            // 当处于【性别】列时
            if (column.property === 'sex') {
                // 如果当前是【性别】列的第一个单元格，那么将向下扩展至 tableData.value.length 行，并且向右扩展至 1 列
                if (rowIndex === 0) return [tableData.value.length, 1];
                // 否则如果当前是【性别】列的其他单元格，那么单元格将收缩至 0 行 0 列（收缩隐藏）
                return [0, 0];
            }
            // 当处于【爱好1】列时
            if (column.property === 'hobby1') {
                // 如果当前是第一个单元格，那么将向下扩展至 2 行，并且向右扩展至 2 列
                if (rowIndex === 0) return [2, 2];
                // 否则如果当前是第二个单元格，那么单元格将收缩至 0 行 0 列（收缩隐藏）
                if (rowIndex === 1) return [0, 0];
            }
            // 当处于【爱好2】列时，收缩前两行的单元格
            if (column.property === 'hobby2') {
                if (rowIndex < 2) return [0, 0];
            }
            return [1, 1];
        };

        return {
            tableColumn: [
                { label: '地区', code: 'area' },
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '爱好1', code: 'hobby1' },
                { label: '爱好2', code: 'hobby2' },
            ],
            tableData,
            spanMethod,
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
    .span-title {
        font-size: 17px;
        font-weight: 600;
        color: #333;
    }
</style>
